<template>
    <view class="main">
        <LoadPage :show="show" />
        <Empty v-if="!dataList.length" />
        <nut-swipe-group v-else lock>
            <nut-swipe :name="'swipe1' + index" v-for="(item, index) in dataList" :key="item.id">
                <view class="pro-item dispaly-center" @click="$goUrl(`/subPackage/server/serverDetail?id=${item.id}`)">
                    <view class="cover">
                        <image :src="item.image" mode="aspectFill" />
                    </view>
                    <view class="desc dispaly-column-between">
                        <view class="top over-2">{{ item.name }}</view>
                        <view class="dispaly-center">
                            <view class="one-p dispaly-center">
                                <view class="tip dispaly-align-center">优惠价</view>
                                <view class="p">¥{{ item.money }}</view>
                            </view>
                            <view class="two-p">
                                <nut-price :price="item.oldMoney" :decimal-digits="2" :thousands="true" strike-through
                                    size="small" />
                            </view>
                        </view>
                    </view>
                </view>
                <template #right>
                    <nut-button style="height: 100%" type="danger" shape="square"
                        @click="postCollect(item.id, index)">删除</nut-button>
                </template>
            </nut-swipe>
        </nut-swipe-group>

        <LoadMore :status="status" v-if="dataList.length" />
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { getCollect, collect } from '@/api/apiList';
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
// 取消收藏
const postCollect = async (id, index) => {
    const res = await collect({ serviceId: id })
    if (res.code == 200) {
        // isCollect
        uni.showToast({
            title: '已取消',
            icon: 'none'
        })
        dataList.value.splice(index, 1)
        // getDataList()
    }
}

const dataList = ref([])
let queryTwo = reactive({
    pageNum: 1,
    pageSize: 8,
})
let status = ref('noMore')
let show = ref(true)
const getDataList = async () => {
    status.value = 'loading';
    const res = await getCollect(queryTwo)
    if (res.code == 200) {
        if (res.rows.length) {
            dataList.value = [...dataList.value, ...res.rows]
            status.value = 'noMore'
        } else {
            status.value = 'noMore'
        }
        show.value = false
    }
}

onLoad(() => {
    getDataList()
})

onReachBottom(() => {
    queryTwo.pageNum++
    getDataList()
})

onPullDownRefresh(async () => {
    uni.showLoading({
        title: '加载中',
        icon: 'none'
    })
    dataList.value = []
    queryTwo.pageNum = 1
    await getDataList()
    uni.stopPullDownRefresh()
    uni.hideLoading()
})

</script>
<style lang="scss" scoped>
:deep(.nut-button--square) {
    height: 100%;
}

.main {
    padding: 30rpx;

    .pro-item {
        height: 190rpx;
        margin-bottom: 60rpx;

        .cover {
            margin-right: 15rpx;

            image {
                width: 190rpx;
                height: 190rpx;
                border-radius: 16rpx;
            }
        }

        .desc {
            height: 190rpx;

            .top {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                font-size: 24rpx;
                color: #111111;
                line-height: 36rpx;
            }

            .one-p {
                border-radius: 4rpx 4rpx 4rpx 4rpx;
                background: #FBE6C7;
                max-width: 200rpx;
                margin-right: 10rpx;

                .tip {
                    background-color: #FB4E47;
                    color: #f7e7ca;
                    font-size: 24rpx;
                    padding: 0 6rpx;
                    margin-right: 10rpx;
                    border-radius: 4rpx 4rpx 4rpx 4rpx;
                }

                .p {
                    padding-right: 10rpx;
                    font-size: 20rpx;
                }
            }
        }
    }
}
</style>